<template>
  <div class="datum">
    <jc-form
      :option-value="basicValue"
      :options="basic"
    />
    <div class="mainPage">
      <div class="left-mainPage">
        <el-tree
          node-key="fid"
          :data="materialGroupL"
          :props="defaultProps"
          accordion
          @node-click="handleNodeClick"
        />
      </div>
      <div class="right-mainPage">
        <div style="margin-bottom: 5px;">
          <el-button size="mini" @click="newly">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" @click="editMater">{{ $t('btn.save') }}<!--保存--></el-button>
        </div>
        <jc-table
          :table-header="materialTableHeader"
          :table-data="materialTableData"
          :table-height="tableHeight"
          serial
        >
          <template v-slot:tagSlot="col">
            <el-link
              v-if="col.scope.row.img"
              @click="pushView(col.scope.row.img)"
            >{{ col.scope.row.img }}</el-link>
            <el-upload
              v-else
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-change="getFileDatum"
              :auto-upload="false"
              class="avatar-uploader"
            >
              <el-button slot="trigger" size="mini" type="primary" @click="indexImg=col.scope.$index">{{ $t('btn.file') }}<!--选取文件--></el-button>
            </el-upload>
          </template>
          <template v-slot:btnSlot="col">
            <el-input v-model="col.scope.row.fdescribe" />
          </template>
          <template v-slot:billSlot="col">
            <el-button size="mini" type="danger" @click="delHang(col.scope.$index)">{{ $t('shop.delete') }}</el-button>
            <el-button size="mini" type="primary"> <!-- @click="download(col.scope.row)" -->
              <!--              下载-->
              <a :href="col.scope.row.img" :download="col.scope.row.fname" target="_blank">{{ $t('btn.file') }}<!--下载--></a>
            </el-button>
          </template>
        </jc-table>
        <jc-pagination
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="queryMaterial"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  deleteMaterialcontrolled,
  queryControlledgroup,
  queryMaterialcontrolledList,
  updateMaterialcontrolled
} from '@/api/basicManagement/materielList'
import jcFormFunction from '@/components/Form/FormFunction'
import jcForm from '@/components/Form'

export default {
  components: {
    jcForm
  },
  mixins: [jcFormFunction],
  props: {
    fcontrolled: {
      type: Array,
      default: function() {
        return []
      }
    },
    fnumber: {
      type: String,
      default: ''
    },
    fmaterialId: {
      type: [String, Number],
      default: ''
    },
    basicValue: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      actionUrl: '/tBdMaterial/insertMaterial',
      materialGroupL: [],
      defaultProps: {
        children: 'details',
        label: 'fname'
      },
      materialTableHeader: [
        { label: this.$t('market.img1'), prop: 'fname', width: '120' },
        { label: this.$t('shop.image'), type: 'tag', prop: 'img' },
        { label: this.$t('market.descrip'), type: 'btn', prop: 'fdescribe' },
        { label: this.$t('market.handle'), type: 'bill', width: '180' }
      ],
      materialTableData: [],
      tableHeight: '62vh',
      indexSelf: 0,
      indexImg: 0,
      pageNum: 1,
      pageSize: 50,
      total: 1,
      basic: {
        fmodel: {
          label: this.$t('market.fmodel2'),
          span: 6,
          disabled: 'disabled',
          labelWidth: '100px'
        },
        fnumber: {
          label: this.$t('market.fmaterial'),
          span: 6,
          labelWidth: '100px',
          disabled: 'disabled'
        },
        fnames: {
          label: this.$t('shop.fname2'),
          span: 6,
          disabled: 'disabled',
          labelWidth: '100px'
        },
        fspecificaTion: {
          label: this.$t('shop.fspecificaTion'),
          span: 6,
          disabled: 'disabled',
          labelWidth: '100px'
        },
        fbaseUnitId: {
          label: this.$t('market.baseUnit'),
          disabled: 'disabled',
          labelWidth: '100px',
          span: 6
        },
        fdescripTion: {
          label: this.$t('market.fdescripTion'),
          span: 12,
          disabled: 'disabled',
          labelWidth: '100px',
          type: 'textarea'
        }
      }
    }
  },
  methods: {
    // 点击左侧
    handleNodeClick(ev) {
      this.fcontrolled.forEach((res, index) => {
        if (res.fcontrolledgroupid === ev.fid) {
          this.fcontrolledgroupid = res.fcontrolledgroupid
          this.indexSelf = index
          this.materialTableData = res.imglist
          this.fmaterialId && this.queryMaterial(ev.fnumber)
        }
      })
    },
    // 受控资料的列表
    queryMaterial(ev) {
      const DATA = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        fnumbergroup: ev,
        fmaterialId: this.fmaterialId
      }
      queryMaterialcontrolledList(DATA).then(res => {
        if (res.code === 0) {
          this.fcontrolled[this.indexSelf].imglist = res.data.array
          this.materialTableData = res.data.array
          this.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      })
    },
    // 修改
    editMater() {
      const DATA = {
        fmaterialId: this.fmaterialId,
        fnumber: this.fnumber,
        // fcontrolled: this.fcontrolled[this.indexSelf]
        fcontrolled: [{
          fcontrolledgroupid: this.fcontrolledgroupid,
          imglist: this.materialTableData
        }]
      }
      updateMaterialcontrolled(DATA).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      })
    },
    // 获取树型控件数据
    async getMaterialGroupL() {
      this.materialTableData = []
      const { data: RES } = await queryControlledgroup({})
      this.materialGroupL = RES
      this.fcontrolled.length === 0 && RES.map(res => {
        this.fcontrolled.push({
          fcontrolledgroupid: res.fid,
          imglist: []
        })
      })
    },
    pushView(ev) {
      window.open(ev)
    },
    // 新增行
    newly() {
      this.materialTableData.push({
        fid: 0,
        img: '',
        fdescribe: ''
      })
    },
    // 删除行
    delHang(index) {
      const fid = this.materialTableData[index].fid
      this.$confirm('确认要删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMaterialcontrolled({
          fid, fnumber: this.fnumber,
          fmaterialId: this.fmaterialId
        }).then(res => {
          if (res.code === 0) {
            this.materialTableData.splice(index, 1)
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              type: 'error'
            })
          }
        })
      })
    },
    download(ev) {
      // window.open(this.$imgUrl + ev.img, '_blank')
    }
  }
}
</script>

<style scoped lang="scss">
.datum {
  width: 100%;
  display: flex;
  flex-direction: column;
  .mainPage {
    margin-top: 7px;
    display: flex;
    flex-direction: row;
    width: 100%;
    .left-mainPage {
      width: 12%;
      height: calc(100vh - 320px);
      overflow: auto;
      display: flex;
      flex-direction: column;
      border: 1px solid #ccc;
    }
    .right-mainPage {
      width: 88%;
      margin-left: 10px;
    }
  }
}
</style>

